<template>
  <div class="wrap">
    <el-form
      ref="ruleFormRef"
      style="max-width: 600px"
      :model="ruleForm"
      status-icon
      :rules="rules"
      label-width="auto"
      class="ruleForm-wrap"
    >
      <el-form-item label="用户名" prop="user_wanted">
        <el-input
          v-model="ruleForm.user_wanted"
          minlength="5"
          message
          placeholder="用户名以英文开头至少3位,可包含数字、中划线、下划线"
          type="text"
        />
      </el-form-item>
      <el-form-item label="昵称" prop="nick_name">
        <el-input v-model="ruleForm.nick_name" />
      </el-form-item>
      <el-form-item label="密码" prop="user_pwd">
        <el-input
          v-model="ruleForm.user_pwd"
          minlength="5"
          autocomplete="off"
        />
      </el-form-item>
      <el-form-item label="邮箱" prop="email">
        <el-input v-model="ruleForm.email" minlength="5" autocomplete="off" />
      </el-form-item>
      <el-form-item label="手机号" prop="mobile">
        <el-input v-model="ruleForm.mobile" />
      </el-form-item>
      <el-form-item label="登录有效期">
        <el-select v-model="ruleForm.token_expired" placeholder="请选择">
          <el-option label="永不失效" :value="0" />
          <el-option label="10分钟" :value="10" />
          <el-option label="30分钟" :value="30" />
          <el-option label="60分钟" :value="60" />
        </el-select>
      </el-form-item>
      <el-form-item class="btn-wrap">
        <el-button type="primary" @click="submitForm(ruleFormRef)">
          注册
        </el-button>
        <el-button type="warning" plain @click="resetForm(ruleFormRef)">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
import { reactive, ref } from 'vue'
import { ElMessage } from 'element-plus'
import { postData } from '@/http/request.js'
import { useRouter } from 'vue-router'
let router = useRouter()
let ruleFormRef = ref(null)

var checkPass = (rule, value, callback) => {
  if (value == '') {
    callback(new Error('请输入密码'))
  } else {
    callback()
  }
}

var checkEmail = (rule, value, callback) => {
  const regEmail = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/
  if (regEmail.test(value)) {
    return callback()
  } else if (value == '') {
    return callback()
  } else {
    callback(new Error('请输入合法邮箱'))
  }
}

var checkPhone = (rule, value, callback) => {
  const phoneReg = /^1[3|4|5|7|8][0-9]{9}$/
  if (!Number.isInteger(+value)) {
    callback(new Error('请输入数字值'))
  } else if (value == '') {
    return callback()
  } else {
    if (phoneReg.test(value)) {
      callback()
    } else {
      callback(new Error('电话号码格式不正确'))
    }
  }
}

const ruleForm = reactive({
  user_wanted: '',
  nick_name: '',
  user_pwd: 888888,
  mobile: '',
  email: '',
  token_expired: 30,
})

const rules = reactive({
  user_wanted: [
    {
      required: true,
      message: '用户名只能为英文开头，可包含数字、中划线、下划线',
      trigger: 'blur',
    },
  ],
  user_pwd: [
    {
      validator: checkPass,
      required: false,
      message: '请输入密码',
      trigger: 'change',
    },
  ],
  nick_name: [{ required: true, message: '请输入昵称', trigger: 'blur' }],
  mobile: [
    { required: false, message: '请输入手机号码', trigger: 'blur' },
    { validator: checkPhone, trigger: 'blur' },
  ],
  email: [
    { required: false, message: '请输入邮箱', trigger: 'blur' },
    { validator: checkEmail, trigger: 'blur' },
  ],
  token_expired: [{ required: false, message: '', trigger: 'blur' }],
})

const submitForm = async (formEl) => {
  console.log(ruleForm)
  console.log(formEl)
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      postData('/sys/admin/register', {
        user_wanted: ruleForm.user_wanted,
        user_pwd: ruleForm.user_pwd,
        nick_name: ruleForm.nick_name,
        mobile: ruleForm.mobile,
        email: ruleForm.email,
        token_expired: Number(ruleForm.token_expired),
      })
        .then((res) => {
          if (res.code == 0) {
            ElMessage({
              type: 'success',
              message: '注册成功',
            })
            setTimeout(() => {
              router.push('/adminList')
            }, 3000)
          } else {
            ElMessage({
              type: 'error',
              message: '注册失败',
            })
          }
        })
        .catch((err) => {
          console.log(err)
        })
    } else {
      console.log('error submit!', fields)
    }
  })
}

const resetForm = (formEl) => {
  if (!formEl) return
  formEl.resetFields()
}
</script>
<style scope>
.wrap {
  margin: 20px 0 0 20px;
}
.btn-wrap{
  margin-top:30px;
}
</style>
